import { ElDatePicker } from 'element-plus';
import { formatDateToString } from 'microconnect-common/utils/date';
import { PropType } from 'vue';
import { useDispatchBubbles } from '../Drawer/store';
import './index.scss';
type TElDatePickerRef = InstanceType<typeof ElDatePicker>;
export const MciDatePicker = defineComponent({
  name: 'MciDatePicker',
  props: {
    // 只有下边框单边线
    singleLine: {
      type: Boolean,
      default: false
    },
    // 宽度占满父元素
    wFull: {
      type: Boolean,
      default: false
    },
    // 日期显示格式
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    // icon 图标位置
    iconLocation: {
      type: String as PropType<'left' | 'right'>,
      default: 'left'
    },
    mode: {
      type: String as PropType<TVitalModeType>,
      default: ''
    }
  },

  setup(props) {
    const { dispatchBubbleChange } = useDispatchBubbles();
    const root = ref<TElDatePickerRef>();
    const modeComputed = computed(() => props.mode);

    return { root, dispatchBubbleChange, modeComputed };
  },
  render() {
    const { singleLine, wFull, iconLocation, modeComputed } = this;

    if (modeComputed === 'view') {
      return (
        <div class="mci-date-picker_view">
          {this.$attrs.modelValue ? formatDateToString(this.$attrs.modelValue as string, this.format.replace('HH', 'hh')) : '-'}
        </div>
      );
    }

    const disableAttrs = modeComputed === 'disable' ? { disabled: true } : {};

    return (
      <ElDatePicker
        onChange={this.dispatchBubbleChange}
        ref="root"
        class={[
          'mci-date-picker',
          { 'mci-single-line': singleLine },
          { 'w-full': wFull },
          { 'icon-right': iconLocation === 'right' }
        ]}
        format={this.format}
        placeholder={this.placeholder}
        {...disableAttrs}
        vSlots={this.$slots}
      />
    );
  }
});
